<template>
    <div class="min-h-screen flex flex-col">
      <!-- 顶部导航 -->
      <header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
          <div class="flex items-center space-x-2">
            <!-- Logo -->
            <img src="./../../assets/logo1.jpg" alt="Logo" class="w-10 h-10 rounded-lg" style="width:155px;height: 60px;">
          </div>
          
          <!-- 导航菜单 -->
          <!-- <nav class="hidden md:flex items-center space-x-6">
            <a href="#" class="text-gray-700 hover:text-primary transition-colors">首页</a>
            <a href="#" class="text-gray-700 hover:text-primary transition-colors">产品</a>
            <a href="#" class="text-gray-700 hover:text-primary transition-colors">服务</a>
            <a href="#" class="text-gray-700 hover:text-primary transition-colors">关于我们</a>
          </nav> -->
          
          <!-- 移动端菜单按钮 -->
          <!-- <button class="md:hidden text-gray-700 focus:outline-none">
            <i class="fa fa-bars text-xl"></i>
          </button> -->
        </div>
      </header>

      <!-- 主要内容 -->
      <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 走马灯/轮播图 -->
        <div class="mb-8 rounded-xl overflow-hidden shadow-lg transform transition-all duration-500 hover:shadow-xl" >
          <!-- <el-carousel height="400px" indicator-position="outside" arrow="always">
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
              <div class="h-full relative">
                <img :src="item.image" alt="轮播图" class="w-full h-full object-cover">
                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
                </div>
              </div>
            </el-carousel-item>
          </el-carousel> -->
          
        <!-- <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in carouselItems" :key="item">
            <el-image :src=" item.url " style="height: 450px;width: 100%;"></el-image> -->
            <!-- <img :src="item.url" alt="" style="width:100%"/> -->
        <!-- </el-carousel-item>
        </el-carousel> -->
      <el-carousel height="auto" autoplay >
        <el-carousel-item style="height: 700px">
          <img src="./../../assets/banner.jpg" alt="" style="width:100%"/>
        <!-- <h3 class="small justify-center" text="2xl">height 300px</h3> -->
      </el-carousel-item>
      </el-carousel>
           
        </div>
        <div style="display: flex;justify-content: center;">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="公告信息" name="first"></el-tab-pane>
            <el-tab-pane label="CVE" name="second"></el-tab-pane>
        </el-tabs>
        </div>
        <div v-if="activeName==='first'" style="margin-top:16px;width: 300px;   float: right;">
            <el-input 
              v-model="searchQuery" 
              placeholder="请输入安全公告ID" 
              clearable 
              class="flex-grow"
            >
              <template #append>
                <el-button icon="el-icon-search" @click="handleSearch">搜索</el-button>
              </template>
            </el-input>
            <!-- <el-button type="default" icon="el-icon-refresh" @click="refreshData">刷新</el-button> -->
          </div>
        <!-- 表格区域 -->
        <div  v-if="activeName==='first'" class="bg-white rounded-xl shadow-md p-6 transform transition-all duration-300 hover:shadow-lg">
          <div class="flex justify-between items-center mb-6">
            <!-- <h2 class="text-2xl font-bold text-gray-800">用户列表</h2> -->
            <!-- <el-button type="primary" icon="el-icon-plus">新增</el-button> -->
          </div>
          
          <!-- 搜索框 -->
         
          
          <!-- 表格 -->
          <el-table 
            :data="tableData" 
            stripe 
            fit 
            highlight-current-row
            class="mb-6"
          >
            <el-table-column 
              v-for="column in columns" 
              :key="column.prop" 
              :prop="column.prop" 
              :label="column.label" 
              :width="column.width"
              :min-width="column.minWidth">
            <template #default="scope">
                <span 
                 v-if="column.prop ==='securityNoticeNo'" 
                class="clickable-cell" 
                @click="handleCellClick(scope.row)"
                style="color:#277AD9;cursor: pointer;"
            >
                     {{ scope.row[column.prop] }}
          </span>
          <span v-else>{{ scope.row[column.prop] }}</span>
        </template></el-table-column>
            <!-- <el-table-column label="操作" width="160">
              <template #default="scope">
                <el-button type="primary" size="small" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column> -->
          </el-table>
          
          <!-- 分页 -->
          <div class="SizeChange" style="position: absolute;right: 16px;margin:12px 12px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="pagination.currentPage"
            :page-sizes="pagination.pageSizes"
            :page-size="pagination.pageSize"
            :total="pagination.total"
          >
          </el-pagination>
          <div style="margin-bottom:16px"> </div>
        </div>
        </div>
        <div  v-else class="bg-white rounded-xl shadow-md p-6 transform transition-all duration-300 hover:shadow-lg">
          <div class="flex justify-between items-center mb-6">
            <div  style="margin-top:16px;width: 300px;   float: right;">
            <el-input 
              v-model="idcve" 
              placeholder="请输入CVE ID" 
              clearable 
              class="flex-grow"
            >
              <template #append>
                <el-button icon="el-icon-search" @click="handleSearchcve">搜索</el-button>
              </template>
            </el-input>
            <!-- <el-button type="default" icon="el-icon-refresh" @click="refreshData">刷新</el-button> -->
          </div>
            <!-- <h2 class="text-2xl font-bold text-gray-800">用户列表</h2> -->
            <!-- <el-button type="primary" icon="el-icon-plus">新增</el-button> -->
          </div>
          
          <!-- 搜索框 -->
         
          
          <!-- 表格 -->
          <el-table 
            :data="tableDatacve" 
            stripe 
            fit 
            highlight-current-row
            class="mb-6"
          >
            <el-table-column 
              v-for="column in columnscve" 
              :key="column.prop" 
              :prop="column.prop" 
              :label="column.label" 
              :width="column.width"
              :min-width="column.minWidth">
            <template #default="scope">
                <span 
                 v-if="column.prop ==='idcve'" 
                class="clickable-cell" 
                @click="handleCellClickcve(scope.row)"
                style="color:#277AD9;cursor: pointer;"
            >
                     {{ scope.row[column.prop] }}
          </span>
          <span v-else>{{ scope.row[column.prop] }}</span>
        </template></el-table-column>
            <!-- <el-table-column label="操作" width="160">
              <template #default="scope">
                <el-button type="primary" size="small" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <div class="SizeChange" style="position: absolute;right: 16px;margin:16px">
          <el-pagination
            @size-change="handleSizeChangecve"
            @current-change="handleCurrentChangecve"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="paginationcve.currentPagecve"
            :page-sizes="paginationcve.pageSizescve"
            :page-size="paginationcve.pageSizecve"
            :total="paginationcve.totalcve"
          >
          </el-pagination>
          <div style="margin-bottom:16px"> </div>
        </div>
          <!-- 分页 -->
         
        </div>
      </main>

      <!-- 页脚 -->
      <footer class="bg-gray-800 text-white py-8 mt-12" style="margin-bottom: 16px;">
        <!-- <div class="container mx-auto px-4">
          <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-6 md:mb-0">
              <div class="flex items-center space-x-2 mb-4">
                <img src="https://picsum.photos/id/1/40/40" alt="Logo" class="w-8 h-8 rounded-lg">
                <span class="text-lg font-bold">企业管理系统</span>
              </div>
              <p class="text-gray-400 text-sm">© 2023 企业管理系统. 保留所有权利.</p>
            </div>
            
            <div class="flex space-x-8">
              <div>
                <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                <ul class="space-y-2 text-gray-400">
                  <li><a href="#" class="hover:text-white transition-colors">首页</a></li>
                  <li><a href="#" class="hover:text-white transition-colors">产品</a></li>
                  <li><a href="#" class="hover:text-white transition-colors">服务</a></li>
                  <li><a href="#" class="hover:text-white transition-colors">关于我们</a></li>
                </ul>
              </div>
              
              <div>
                <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                <ul class="space-y-2 text-gray-400">
                  <li class="flex items-center"><i class="fa fa-map-marker mr-2"></i> 北京市朝阳区</li>
                  <li class="flex items-center"><i class="fa fa-phone mr-2"></i> 400-123-4567</li>
                  <li class="flex items-center"><i class="fa fa-envelope mr-2"></i> contact@example.com</li>
                </ul>
              </div>
            </div>
          </div>
        </div> -->
      </footer>
    </div>
  </template>

  <script setup>
    import image1 from '@/assets/1.jpg'
    import image2 from '@/assets/2.jpg'
    import image3 from '@/assets/3.jpg'
    import image4 from '@/assets/4.jpg'
    import {securityNoticeslist,cves}from '@/utils/api.js'
    import { ref, onMounted,computed} from 'vue';
    import { useRouter,useRoute } from 'vue-router';
    

    const router = useRouter()
    const route = useRoute()
    const searchQuery = ref('');
    const idcve = ref('');
    const tableData=ref('');
    const tableDatacve=ref('')
    const activeName=ref('first')
   
    onMounted(()=>{
        
        fetchData()
        })
    const fetchData = ()=>{
    let prems={
        securityNoticeNo:searchQuery.value,
        page:pagination.value.currentPage,
        per_page:pagination.value.pageSize
    }
    securityNoticeslist(prems).then((res)=>{
    console.log(res);
    tableData.value=res.data.items
    pagination.value.total=res.data.total
    })
    }
    const fetchDatacve = ()=>{
    let prems={
        idcve:searchQuery.value,
        page:paginationcve.value.currentPagecve,
        per_page:paginationcve.value.pageSizecve
    }
    cves(prems).then((res)=>{
    console.log(res);
    tableDatacve.value=res.data.items
    paginationcve.value.totalcve=res.data.total
    })
    }
    const handleCellClick=(row)=>{
        router.push({ name: 'notice',query:{row:row.securityNoticeNo }},)
        // console.log(row.securityNoticeNo,"跳转");
    }
    const handleCellClickcve=(row)=>{
        router.push({ name: 'cve',query:{row:row.idcve }},)
        // console.log(row.securityNoticeNo,"跳转");
    }
  const carouselItems = [
        {
            url:image1
        },
        {
            url:image2
        },
        {
            url:image3
        },
        {
            url:image4
        }
    ];
  // 搜索相关

    const pagination = ref({
          currentPage: 1,
          pageSize: 10,
          total: 0,
          pageSizes: [5, 10, 20, 50]
        });
        const paginationcve = ref({
          currentPagecve: 1,
          pageSizecve: 10,
          totalcve: 0,
          pageSizescve: [5, 10, 20, 50]
        });
        
//     const columns = computed(() => {
        
    
// })
    // const columns=ref('')
 
    const  handleClick= () => {
        // console.log(activeName.value);
       if(activeName.value ==="second"){
        fetchData()
       }else{
        fetchDatacve()
       };
      };
  // 搜索操作方法
    const handleSearch = () => {
        fetchData();
    // 这里可以添加搜索逻辑
  };
    const handleSearchcve = () => {
        fetchDatacve();
    // 这里可以添加搜索逻辑
  };
//     const refreshData = () => {
//     console.log('刷新数据');
//     // 这里可以添加刷新逻辑
//   };
   
    const columns = ref([
          { prop: 'securityNoticeNo', label: '公告',  },
          { prop: 'type', label: '严重等级',  },
          { prop: 'affectedComponent', label: '影响组件', },
          { prop: 'affectedProduct', label: '影响产品', },
        ]);
    const columnscve = ref([
          { prop: 'idcve', label: 'CVE',  },
          { prop: 'type', label: '漏洞类型',  },
          { prop: 'affectedProduct', label: '受影响产品', },
          { prop: 'status', label: '状态', },
          { prop: 'affectedComponent', label: '受影响组件', },
        ]);
  

   // 处理分页
    const handleSizeChange = (size) => {
          pagination.value.pageSize = size;
          fetchData();
        };

    const handleCurrentChange = (page) => {
          pagination.value.currentPage = page;
          fetchData();
        };
        const handleSizeChangecve = (size) => {
          paginationcve.value.pageSizecve = size;
          fetchDatacve();
        };

    const handleCurrentChangecve = (page) => {
          paginationcve.value.currentPagecve = page;
          fetchDatacve();
        };
    
  </script>